
// 封装选择器函数
function $(selector) {
    var c = selector.substring(0, 1);//获取第一个字符
    if (c == "#") {
        return document.getElementById(selector.substring(1, selector.length));//返回相应的元素
    } else if (c == '.') {
        return document.getElementsByClassName(selector.substring(1, selector.length))
    } else {
        return document.getElementsByTagName(selector);
    }
}
//取消滚动条的监听
// document.removeEventListener('scroll', listenScroll)



//获取用户的id
function userMessageS(){
    return new Promise((reslove,reject)=>{
        axios({
            url:'/picture/session',
        }).then((data)=>{
            reslove(data)
        }).catch((err)=>{
            reject(err)
        })
    })
}

userMessageS().then(data=>{
    console.log(data);
    if(data.data.session){
        userId=data.data.session.id
    }
})

// function getUserInfo(userId){
//     axios.get(`/index/getUserInfo?id=${userId}`)
//     .then(data=>{
//         // let info = data.data.data.data
//         // console.log(info)
//         console.log(data)
//     })
//     .catch(err=>{
//         console.log(err)
//     })
// }
// getUserInfo(userId)
//省份
var provinceArr = [];//定义数组
provinceArr[0] = ['北京市'];
provinceArr[1] = ['天津市'];
provinceArr[2] = ['上海市'];
provinceArr[3] = ['重庆市'];
provinceArr[4] = ['河北省'];
provinceArr[5] = ['河南省'];
provinceArr[6] = ['云南省'];
provinceArr[7] = ['辽宁省'];
provinceArr[8] = ['黑龙江省'];
provinceArr[9] = ['湖南省'];
provinceArr[10] = ['安徽省'];
provinceArr[11] = ['山东省'];
provinceArr[12] = ['新疆维吾尔自治区'];
provinceArr[13] = ['江苏省'];
provinceArr[14] = ['浙江省'];
provinceArr[15] = ['江西省'];
provinceArr[16] = ['湖北省'];
provinceArr[17] = ['广西壮族'];
provinceArr[18] = ['甘肃省'];
provinceArr[19] = ['山西省'];
provinceArr[20] = ['内蒙古自治区'];
provinceArr[21] = ['陕西省'];
provinceArr[22] = ['吉林省'];
provinceArr[23] = ['福建省'];
provinceArr[24] = ['贵州省'];
provinceArr[25] = ['广东省'];
provinceArr[26] = ['青海省'];
provinceArr[27] = ['西藏'];
provinceArr[28] = ['四川省'];
provinceArr[29] = ['宁夏回族'];
provinceArr[30] = ['海南省'];
provinceArr[31] = ['台湾省'];
provinceArr[32] = ['香港特别行政区'];
provinceArr[33] = ['澳门特别行政区'];
//市县,每个数组第一个元素为省份,其他的为这个省份下的市县
var cityArr = [];
cityArr[0] = ['东城区', '西城区', '崇文区', '宣武区', '朝阳区', '丰台区', '石景山区', '海淀区', '门头沟区', '房山区', '通州区', '顺义区', '昌平区', '大兴 区', '怀柔区', '平谷区', '密云县', '延庆县'];
cityArr[1] = ['和平区', '河东区', '河西区', '南开区', '河北区', '红桥区', '塘沽区', '汉沽区', '大港区', '东丽区', '西青区', '津南区', '北辰区', '武清区', '宝坻区', '宁河县', '静海县', '蓟县'];
cityArr[2] = ['黄浦区', '卢湾区', '徐汇区', '长宁区', '静安区', '普陀区', '闸北区', '虹口区', '杨浦区', '闵行区', '宝山区', '嘉定区', '浦东新区', '金山区', '松江区', '青浦区', '南汇区', '奉贤区', '崇明县'];
cityArr[3] = ['万州区', '涪陵区', '渝中区', '大渡口区', '江北区', '沙坪坝区', '九龙坡区', '南岸区', '北碚区', '万盛区', '双桥区', '渝北区', '巴南区', '黔江区', '长寿区', '江津区', '合川区', '永川区', '南川区', '綦江县', '潼南县', '铜梁县', '大足县', '荣昌县', '璧山县', '梁平县', '城口县', '丰都县', '垫江县', '武隆县', '忠县', '开县', '云阳县', '奉节县', '巫山县', '巫溪县', '石柱土家族自治县', '秀山土家族苗族自治县', '酉阳土家族苗族自治县', '彭水苗族土家族自治县'];
cityArr[4] = ['石家庄市', '唐山市', '秦皇岛市', '邯郸市', '邢台市', '保定市', '张家口市', '承德市', '沧州市', '廊坊市', '衡水市'];
cityArr[5] = ['郑州市', '开封市', '洛阳市', '平顶山市', '安阳市', '鹤壁市', '新乡市', '焦作市', '济源市', '濮阳市', '许昌市', '漯河市', '三门峡市', '南阳市', '商丘市', '信阳市', '周口市', '驻马店市'];
cityArr[6] = ['昆明市', ' 曲靖市', '玉溪市', '保山市', '昭通市', '丽江市', '思茅市', '临沧市', '楚雄彝族自治州', '红河哈尼族彝族自治州', '文山壮族苗族自治州', '西双版纳傣族自治州', '大理白族自治州', '德宏傣族景颇族自治州', '怒江傈僳族自治州', '迪庆藏族自治州'];
cityArr[7] = ['沈阳市', '大连市', '鞍山市', '抚顺市', '本溪市', '丹东市', '锦州市', '营口市', '阜新市', '辽阳市', '盘锦市', '铁岭市', '朝阳市', '葫芦岛市'];
cityArr[8] = ['哈尔滨市', '齐齐哈尔市', '鸡西市', '鹤岗市', '双鸭山市', '大庆市', '伊春市', '佳木斯市', '七台河市', '牡丹江市', '黑河市', '绥化市', '大兴安岭地区'];
cityArr[9] = ['长沙市', '株洲市', '湘潭市', '衡阳市', '邵阳市', '岳阳市', '常德市', '张家界市', '益阳市', '郴州市', '永州市', '怀化市', '娄底市', '湘西土家族苗族自治州'];
cityArr[10] = ['合肥市', '芜湖市', '蚌埠市', '淮南市', '马鞍山市', '淮北市', '铜陵市', '安庆市', '黄山市', '滁州市', '阜阳市', '宿州市', '巢湖市', '六安市', '亳州市', '池州', '宣城市'];
cityArr[11] = ['济南市', '青岛市', '淄博市', '枣庄市', '东营市', '烟台市', '潍坊市', '济宁市', '泰安市', '威海市', '日照市', '莱芜市', '临沂市', '德州市', '聊城市', '滨州市', '菏泽市'];
cityArr[12] = ['乌鲁木齐市', '克拉玛依市', '吐鲁番地区', '哈密地区', '昌吉回族自治州 ', '博尔塔拉蒙古自治州 ', '巴音郭楞蒙古自治州 ', '阿克苏地区', '克孜勒苏柯尔克孜自治州 ', '喀什地区', '和田地区', '伊犁哈萨克自治州', '塔城地区', '阿勒泰地区', '石河子市', '阿拉尔市', '图木舒克市', '五家渠市'];
cityArr[13] = ['南京市', '无锡市', '徐州市', '常州市', '苏州市', '南通市', '连云港市', '淮安市', '盐城市', '扬州市', '镇江市', '泰州市', '宿迁市'];
cityArr[14] = ['杭州市', '宁波市', '温州市', '嘉兴市', '湖州市', '绍兴市', '金华市', '衢州市', '舟山市', '台州市', '丽水市'];
cityArr[15] = ['南昌市', '景德镇市', '萍乡市', '九江市', '新余市', '鹰潭市', '赣州市', '吉安市', '宜春市', '抚州市', '上饶市'];
cityArr[16] = ['武汉市', '黄石市', '十堰市', '宜昌市', '襄樊市', '鄂州市', '荆门市', '孝感市', '荆州市', '黄冈市', '咸宁市', '随州市', '恩施土家族苗族自治州', '仙桃市', '潜江市', '天门市', '神农架林区'];
cityArr[17] = ['南宁市', '柳州市', '桂林市', '梧州市', '北海市', '防城港市', '钦州市', '贵港市', '玉林市', '百色市', '贺州市', '河池市', '来宾市', '崇左市'];
cityArr[18] = ['兰州市', '嘉峪关市', '金昌市', '白银市', '天水市', '武威市', '张掖市', '平凉市', '酒泉市', '庆阳市', '定西市', '陇南市', '临夏回族自治州', '甘南藏族自治州'];
cityArr[19] = ['太原市', '大同市', '阳泉市', '长治市', '晋城市', '朔州市', '晋中市', '运城市', '忻州市', '临汾市', '吕梁市'];
cityArr[20] = ['呼和浩特市', '包头市', '乌海市', '赤峰市', '通辽市', '鄂尔多斯市', '呼伦贝尔市', '巴彦淖尔市', '乌兰察布市', '兴安盟', '锡林郭勒盟', '阿拉善盟'];
cityArr[21] = ['西安市', '铜川市', '宝鸡市', '咸阳市', '渭南市', '延安市', '汉中市', '榆林市', '安康市', '商洛市'];
cityArr[22] = ['长春市', '吉林市', '四平市', '辽源市', '通化市', '白山市', '松原市', '白城市', '延边朝鲜族自治州'];
cityArr[23] = ['福州市', '厦门市', '莆田市', '三明市', '泉州市', '漳州市', '南平市', '龙岩市', '宁德市'];
cityArr[24] = ['贵阳市', '六盘水市', '遵义市', '安顺市', '铜仁地区', '黔西南布依族苗族自治州', '毕节地区', '黔东南苗族侗族自治州', '黔南布依族苗族自治州'];
cityArr[25] = ['广州市', '韶关市', '深圳市', '珠海市', '汕头市', '佛山市', '江门市', '湛江市', '茂名市', '肇庆市', '惠州市', '梅州市', '汕尾市', '河源市', '阳江市', '清远市', '东莞市', '中山市', '潮州市', '揭阳市', '云浮市'];
cityArr[26] = ['西宁市', '海东地区', '海北藏族自治州', '黄南藏族自治州', '海南藏族自治州', '果洛藏族自治州', '玉树藏族自治州', '海西蒙古族藏族自治州'];
cityArr[27] = ['拉萨市', '昌都地区', '山南地区', '日喀则地市', '那曲地区', '阿里地区', '林芝地区'];
cityArr[28] = ['成都市', '自贡市', '攀枝花市', '泸州市', '德阳市', '绵阳市', '广元市', '遂宁市', '内江市', '乐山市', '南充市', '眉山市', '宜宾市', '广安市', '达州市', '雅安市', '巴中市', '资阳市', '阿坝藏族羌族自治州', '甘孜藏族自治州', '凉山彝族自治州'];
cityArr[29] = ['银川市', '石嘴山市', '吴忠市', '固原市', '中卫市'];
cityArr[30] = ['海口市', '三亚市', '五指山市', '琼海市', '儋州市', '文昌市', '万宁市', '东方市', '定安县', '屯昌县', '澄迈县', '临高县', '白沙黎族自治县', '昌江黎族自治县', '乐东黎族自治县', '陵水黎族自治县', '保亭黎族苗族自治县', '琼中黎族苗族自治县'];
cityArr[31] = ['台北市', '高雄市', '基隆市', '台中市', '台南市', '新竹市', '嘉义市'];
cityArr[32] = ['中西区', '湾仔区', '东区', '南区', '油尖旺区', '深水埗区', '九龙城区', '黄大仙区', '观塘区', '荃湾区', '葵青区', '沙田区', '西贡区', '大埔区', '北区', '元朗区', '屯门区', '离岛区'];
cityArr[33] = ['澳门'];

let provinSelect = ''
let prostr = ''
for (var i = 0; i < provinceArr.length; i++) {
    prostr += `
    <option>${provinceArr[i]}</option>
    `
}





//点修改昵称之后出来弹窗
$('.changeName')[0].onclick = () => {
    $('.changeNameBox')[0].style.display = 'block'
}
//监听修改名字的表单
$('.newNameInput')[0].addEventListener('input',()=>{
    let num = $('.newNameInput')[0].value.length
    if(num >= 20){
        $('.namefont')[0].innerHTML = `还可以输入0字`
    }else{
        $('.namefont')[0].innerHTML = `还可以输入${20 - num}字`
    }
})
//确认修改昵称
$('.nameOkBtn')[0].onclick = function(){
    let name = $('.newNameInput')[0].value
    axios({
        method:"post",
        data:{
            userId:userId,
            name:name
        },
        url:"/index/changeName"
    }).then(data=>{
        console.log(data)
        if(name){
           //要判断有没有改
            if(name == this.getAttribute('data-name')){
                closeName()
            }else{
                if(data.data.data.code == 200001){//重复
                    tigs(`${data.data.data.message}`,false)
                }else{
                    $('.userName')[0].innerHTML = name
                    $('.name')[0].children[0].innerHTML = name
                    $('.newNameInput')[0].value = ''
                    closeName()
                    tigs('修改成功',true)
                    this.setAttribute('data-name',name)
                }
            } 
        }else{
            tigs('请输入昵称！',false)
        }
        
        
    }).catch((err)=>{
        console.log(err)
    })
}
//修改一句话
$('.changeAline')[0].onclick = () => {
    $('.changeLineBox')[0].style.display = 'block'
}

$('.lineOkBtn')[0].onclick = function(){
    let resume = $('.schangeLineText')[0].value
    if(!resume){
        resume = 'TA很懒，什么也没有留下~'
    }
    //判断有没有改
    if(this.getAttribute('data-resume') == resume){
        closeLine()
    }else{
        axios({
            method:'POST',
            data:{
                userId:userId,
                resume:resume
            },
            url:"/index/resume"
        }).then(data=>{
            $('.aLine')[0].children[0].innerHTML = resume
            $('.schangeLineText')[0].value = ''
            closeLine()
            $('.font')[0].innerHTML = `还可以输入20字`
            this.setAttribute('dasta-resume',resume)
            tigs('修改成功',true)
            
        }).catch(err=>{
            console.log(err)
        })
    }
    
}

//监听修改一句话输入表单
$('.schangeLineText')[0].addEventListener('input',function(){
    let num = $('.schangeLineText')[0].value.length
    if(num >= 20){
        $('.font')[0].innerHTML = `还可以输入0字`
    }else{
        $('.font')[0].innerHTML = `还可以输入${20 - num}字`
    }
})



//修改性别
let custSex = $('.newSex')[0].getAttribute('data-sex')
$('.changeSex')[0].onclick = () => {
    if(custSex == '男'){
        $('.male')[0].checked = true
    }else if(custSex == '女'){
        $('.female')[0].checked = true
    }else{
        $('.nosex')[0].checked = true
    }
    $('.changeSexBox')[0].style.display = 'block'
    
}
//确认修改性别
$('.SexOkBtn')[0].onclick =()=>{
    let sex = null
    //获取用户新选中的性别
    for(let a = 0;a < $('.newSex')[0].children.length;a++){
        if($('.newSex')[0].children[a].checked == true){
            sex = $('.newSex')[0].children[a].getAttribute('data-sex')
        }
    }
    if(sex == custSex) {
        closeSex()
    }else{
        axios({
            method:'post',
            url:'/index/changeSex',
            data:{
                id:Number(userId),
                sex:sex
            }
        }).then(data=>{
            custSex = sex
            $('.newSex')[0].setAttribute('data-sex',custSex)
            closeSex()
            $('.sexP')[0].innerHTML =custSex
            tigs('修改成功',true)

        }).catch(err=>{
            console.log(err)
        })
    }
    
}

//修改城市
$('.changeCity')[0].onclick = () => {
    $('.changeCityBox')[0].style.display = 'block'
    $('.provin')[0].innerHTML = prostr
    let option = $('.provin')[0].children
    let cityStr = ''
    for (var i = 0; i < option.length; i++) {
        if (option[i].selected == true) {
            for (var a = 0; a < cityArr[i].length; a++) {
                cityStr += `
                <option>${cityArr[i][a]}</option>
                `
            }
            $('.city')[0].innerHTML = cityStr
        }
    }
}
//确认修改城市
$('.CityOkBtn')[0].onclick = function(){
    let province = null
        city = null
    for(let i = 0;i < $('.provin')[0].children.length;i++){
        if($('.provin')[0].children[i].selected == true){
            province = $('.provin')[0].children[i].innerHTML
        }
    }
    for(let i = 0;i < $('.city')[0].children.length;i++){
        if($('.city')[0].children[i].selected == true){
            city = $('.city')[0].children[i].innerHTML
        }
    }
    let area = `${province} ${city}`
    //判断有没有修改
    if(this.getAttribute('data-city') == area){
        closeCity()
    }else{
        axios({
            method:"post",
            url:'/index/changeCity',
            data:{
                id:Number(userId),
                area:area,
                sex:custSex
            }
        }).then(data=>{
            closeCity()
            this.setAttribute('data-city',area)
            $('.cityP')[0].innerHTML = area 
            for(let i = 0;i < $('.city')[0].options.length;i++){
                $('.city')[0].options[i].selected = false
            }
            tigs('修改成功',true)
        }).catch(err=>[
            console.log(err)
        ])
    }
    

}
//修改邮箱
$('.changeEmail')[0].onclick = () => {
    $('.changeEmailBox')[0].style.display = 'block'

}
//确认修改邮箱
$('.EmailOkBtn')[0].onclick = function(){
    let email = $('.newEmailInput')[0].value
    if(email){
        if(this.getAttribute('data-email') == email){
            closeEmail()
        }else{
            //判断邮箱格式是否正确
            if(email.match(/^\w+@\w+\.\w+$/i)){
                axios({
                    method:'post',
                    url:"/index/changeEmail",
                    data:{
                        id:Number(userId),
                        email:email
                    }
                }).then(data=>{
                    if(data.data.data.code == 200001){//邮箱重复
                        tigs(`${data.data.data.message}`,false)
                    }else{
                        this.setAttribute('data-email',email)
                        $('.emailP')[0].innerHTML = email
                        closeEmail()
                        tigs('修改成功',true)
                    }
                }).catch(err=>{
                    console.log(err)
                })
            }else{
                tigs('请检查邮箱格式！',false)
            }
            
        }
    }else{
        closeEmail()
    }
}
//修改密码
$('.changeBtn')[0].onclick = function(){
    let password = $('.nowPassword')[0].value
        newPassword = $('.newPassword')[0].value
        repeatPassword = $('.surePassword')[0].value
    if(password && newPassword && repeatPassword){
        //如果账号密码长度不是6到16
        if(newPassword.length >=6 && newPassword.length <= 16){
            NProgress.start()
            NProgress.set(0.7)
            NProgress.inc()
            $('.black')[0].style.display = 'block'
            axios({
                url:"/index/changePassword",
                method:"post",
                data:{
                    id:Number(userId),
                    password:password,
                    newPassword:newPassword,
                    repeatPassword:repeatPassword
                }
            }).then(data=>{
                if(data.data.data.code == 200001){
                    tigs(`${data.data.data.message}`,false)
                }else{
                    NProgress.done()
                    let time = 3
                        timeInter = null
                    timeInter = setInterval(function(){
                        if(time == 0){
                            clearInterval(timeInter)
                            window.location.href = '/login'
                        }else{
                            time -= 1
                            tigs(`修改成功，${time}秒后将前往登录页面`,true)
                        }
                    },1000)
    
                }
                console.log(data)
            }).catch(err=>{
                console.log(err)
            })
        }else{
            tigs('请注意密码长度！',false)
        }
        
    }else{
        tigs('请填写完整！',false)
    }
}

$('.closeName')[0].onclick = closeName
$('.closeLine')[0].onclick = closeLine
$('.closeSex')[0].onclick = closeSex
$('.closeCity')[0].onclick = closeCity
$('.closeEmail')[0].onclick = closeEmail

function closeName() {
    $('.newNameInput')[0].value = ''
    $('.changeNameBox')[0].style.display = 'none'
    $('.namefont')[0].innerHTML = `还可以输入20字`

}
function closeLine() {
    $('.changeLineBox')[0].style.display = 'none'

}
function closeSex(){
    $('.changeSexBox')[0].style.display = 'none'
}
function closeCity(){
    $('.changeCityBox')[0].style.display = 'none'

}
function closeEmail(){
    $('.changeEmailBox')[0].style.display = 'none'
    
}


//点击修改头像要出来画布
$('.upBtnFont')[0].onclick = function () {
    $('.centerLeft')[0].innerHTML = ''
    // $('.centerRight')[0].innerHTML = `
    // <p>图片预览:</p>
    // <div class="small"/>
    // <div class="small"/>
    // `
    $('.box')[0].style.display = 'block'

}

var cropper = null

$('.cropperInput')[0].onchange = function () {
    fileToBase64(this)//把图片放到画布上
    // 使用cdn引入Js
    cropper = new Cropper(image, {
        aspectRatio: 1 / 1,//裁剪框的比例
        viewMode: 1,//图片跟背景布的位置关系
        preview: '.small',//生成预览图的效果地方
        guides: false,//取消裁剪框上的虚线
        // background:true,
        crop: function (e) {//裁剪过程执行的函数

        }
    });
}




//将file转为base64
function fileToBase64(a) {
    var txt = a.files[0];
    formData = new FormData()
    formData.append('img[]', txt);
    var src = window.URL.createObjectURL(txt);
    //判断宽高
    $('.centerLeft')[0].innerHTML = `
    <img src='${src}' id='image'/>
    `
    let headImg = $('.centerLeft')[0].children[0]
    //图片加载完之后
    headImg.onload = function () {
        let imgWidth = headImg.offsetWidth
        let imgHeight = headImg.offsetHeight
        if (imgWidth > imgHeight) {
            headImg.style.width = '100%'
            headImg.style.height = 'auto'
        } else {
            headImg.style.width = 'auto'
            headImg.style.height = '100%'
        }
    }

}

//复位按钮
$('.resetBtn')[0].onclick = function () {
    if (ifInput()) {
        cropper.reset()
    }
}
//旋转按钮
$('.rotateBtn')[0].onclick = function () {
    if (ifInput()) {
        cropper.rotate(90)
    }
}
//换向按钮
var scale = true
$('.huanXiangBtn')[0].onclick = function () {
    if (ifInput()) {
        if (scale) {
            cropper.scale(-1, 1)
            scale = false
        } else {
            cropper.scale(1, 1)
            scale = true
        }
    }
}
//判断有没有选择图片
function ifInput() {
    if ($('.cropperInput')[0].files[0]) return true
    else return false
}

// //确定裁剪   修改路径版
// $('.crop')[0].onclick = function(){
//     if(ifInput()){
//         var file = null
//         let headImg = 'headImg'
//         cropper.getCroppedCanvas().toBlob(b=>{
//             file = new File([b], headImg,{type: 'multipart/form-data', lastModified: Date.now()});//该方法适用于火狐和谷歌，不适于IE
//             // console.log(b)
//             console.log(file)
//             var formData = new FormData()
//             formData.append('multipartFile',file);
//             axios({
//                 url:"/index/changeHead?id=6",
//                 data: formData,
//                 method:'post'
//             }).then((data)=>{
//                 console.log(data)
//             }).catch((err)=>{
//                 console.log(err)
//             })
//         })

//     }
// }
//确定裁剪
$('.crop')[0].onclick = function () {
    if (ifInput()) {
        $('.black')[0].style.display = 'block'
        NProgress.start()
        NProgress.set(0.7)
        NProgress.inc()
        var file = null 
        let headImg = 'headImg'
        cropper.getCroppedCanvas().toBlob(b => {
            // file = new File([b], headImg,{type: 'multipart/form-data', lastModified: Date.now()});//该方法适用于火狐和谷歌，不适于IE
            console.log(b)
            // console.log(file)
            var formData = new FormData()
            // formData.append('multipartFile',b);  如果不做处理
            formData.append('multipartFile',b,'temp.jpg');
            axios({
                url: `/index/changeHead?userId=${userId}`,
                data: formData,
                method: 'post'
            }).then((data) => {
                NProgress.done()
                console.log(data)
                closeCrop()
                tigs('修改成功',true)
                cropper.destroy()
                $('.heardUser')[0].style.backgroundImage = `url(${data.data.data.data})`
                $('.headImg')[0].src = data.data.data.data
                $('.black')[0].style.display = 'none'

            }).catch((err) => {
                console.log(err)
            })
        })

    }
}


function closeCrop(){
    $('.box')[0].style.display = 'none'
}
$('.scloseCropper')[0].onclick = closeCrop


 